<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>{% block title %}WeChat{% endblock %}</title>

        <!-- Bootstrap -->
        <link href="/static/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="/static/js/jquery-1.11.2.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="/static/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    </head>
    <body style="padding-top: 70px;">
        <div class="container">
            {% block navbar %}
            <nav class="navbar navbar-inverse navbar-fixed-top">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                      <a class="navbar-brand" href="/">WeChat</a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                      <ul class="nav navbar-nav">
                        <li {% block user %}{% endblock %}><a href="/user">User</a></li>
                        <li {% block status %}{% endblock %}><a href="/status">Moments</a></li>
                        <li {% block post %}{% endblock %}><a href="/post">Post</a></li>
                        <li {% block friends %}{% endblock %}><a href="/friends">Friends</a></li>
                      </ul>
                      <form class="navbar-form navbar-left" role="search" action="/status" method="get">
                        <div class="form-group">
                          <input type="text" name="keyword" class="form-control" placeholder="Search" {% block searchword %}{% endblock %}>
                        </div>
                        <button type="submit" class="btn btn-default">Submit</button>
                      </form>
                      <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">About</a></li>
                        <li><a href="/exit">Exit</a></li>
                      </ul>
                  </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
            {% endblock %}
            
        </div>
        {% block content %}{% endblock %}

    </body>
</html>